<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>2017.4.24 router</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>

<body>
    <div id="app">
      
       
        <my-component></my-component>

        
    </div>
    <script>
        var Child = {
            template:'<div>我是一个组件</div>'
        }
        Vue.component('first',{
            template:'<span>{{todo}}{{con}}</span>',
            data:function(){
                return{
                    con :this.todo
                }
            },
            props:['todo']
        })
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    firstName: 'Foo',
                    lastName: 'Bar',
                    num: 1,
                    checkedname: [],
                    message:'hello world'
                }
            },
            watch: {

            },
            computed: {
                fullName: {
                    get: function () {
                        return this.num - 1
                    },
                    set: function (newval) {
                        this.num = newval + 'set'
                    }
                }
            },
            methods: {
                add: function () {
                    this.num = this.num + 1
                },
                eve: function (event) {
                    var btn = event.target
                    btn.innerText = 'world';
                    console.log(btn)
                }
            },
            components: {
                 'my-component': Child
            }
        })
    </script>
</body>

</html>